{{ extend '../_layouts/home.html' }}

{{ block 'title' }}{{ topic[0].title }}{{ /block }}

{{ block 'body' }} 
<section class="container">
    <div class="col-md-9">
        <div class="bg3Color">
            <div class="topic-header">
                <span class="topic-full-title">{{ topic[0].title }}</span>
                <div class="topic-detail">
                    发布于 {{ fromNowFormat(topic[0].created_time) }}
                    <span> 作者 {{ topic[0].users[0].nickname }}</span>
                    <span> {{ topic[0].click_num }} 次浏览</span>
                    <span> 来自 {{ topic[0].type }}</span>
                    {{ if user }}
                    <span class="followHidden" id="myuserId">{{ formateId(user._id) }}</span>
                    <span class="followHidden" id="mytopicId">{{ formateId(topic[0]._id) }}</span>
                    <span class="followHidden" id="myCollecteId">{{ formateId(collecteId) }}</span>
                    {{ if isCollecte == true }}
                    <span> <a href="javascript:void(0);" class="collected" id="removeCollect"><i class="layui-icon layui-icon-star-fill"></i> 已收藏</a></span>
                    {{ else }}
                    <span> <a href="javascript:void(0);" class="collect" id="addCollect"><i class="layui-icon layui-icon-star"></i> 收藏</a></span>
                    {{ /if }}
                    {{ /if }}
                    {{ if user && topic[0].users[0].nickname === user.nickname }}
                    <span> 更新于 {{ fromNowFormat(topic[0].last_modified_time) }}</span>
                    <a href="/topic/edit/{{ formateId(topic[0]._id) }}" class="edit-topic">
                        <i class="glyphicon glyphicon-pencil"></i>编辑
                    </a>
                    {{ else }}
                    {{ /if }}
                </div>
            </div>
            <div id="topic-content">
                <!-- Server-side output Markdown text -->
                <textarea style="display:none;">{{ topic[0].content }}</textarea>             
            </div>
        </div>
        <!-- 回复列表 -->
        {{ if comment[0] }}
        <div class="bg3Color margintop">
            <div class="comment-container">
                <div class="comment-header">
                    <span id="callback_number">{{ topic[0].call_num }} 回复</span>
                </div>
                <div class="comment-content">
                    {{ each comment cmt}}
                    <div class="comment-list-item">
                        <div class="author-content">
                            <a href="" title="" class="user-avatar">
                                <img src="{{ cmt.users[0].avatar }}" alt="">
                            </a>
                            <div class="currentuser-info">
                                <a href="" class="reply_author">{{ cmt.users[0].nickname }}</a>
                                <a href="" class="reply_time">{{ $index+1 }}楼 • {{ fromNowFormat(cmt.created_time) }}</a>
                                {{ if cmt.users[0].nickname === topic[0].users[0].nickname }}
                                <span class="reply_by_author">作者</span>
                                {{ /if }}
                            </div>
                            <div class="currentuser-action">
                                {{ if user }}
                                <span>
                                    <span class="followHidden" id="myCommentId{{$index}}">{{ formateId(cmt._id) }}</span>
                                    {{ if cmt.isThumbs == true }}
                                    <a href="javascript:void(0)" title="喜欢" id="notLike{{$index}}">
                                        <i class="redColor layui-icon layui-icon-praise"></i>
                                    </a>
                                    {{ else }}
                                    <a href="javascript:void(0)" title="求喜欢" id="myLike{{$index}}">
                                        <i class="layui-icon layui-icon-praise"></i>
                                    </a>
                                    {{ /if }}
                                    <span class="thumbs_num" id="thisNum{{$index}}"></span>
                                </span>
                                <span>
                                    <a href="" title="回复">
                                        <span class="glyphicon glyphicon-comment"></span>
                                    </a>
                                </span>
                                {{ /if }}
                                {{ if user && cmt.users[0].nickname == user.nickname }}
                                <span>
                                    <a href="/comment/delete/{{ formateId(cmt._id) }}" title="删除" class="delete-topic" style="color: #ef4238;">
                                        <i class="glyphicon glyphicon-trash"></i>
                                    </a>
                                </span>
                                {{ /if }}
                            </div>
                        </div>
                        <div class="reply-content">
                            <span>{{ cmt.content }}</span>
                        </div>
                    </div>
                    {{ /each }}
                </div>
            </div>
        </div>
        {{ /if }}
        
        {{ each thumbNum num i }}
        <span class="thumbs_num followHidden" id="thumb{{i}}">{{num}}</span>
        {{ /each }}
        <!-- 回复表单 -->
        {{ if user }}
        <div class="bg3Color margintop">
            <div class="comment-container">
                <div class="comment-header">
                    <span>添加回复</span>
                </div>
                <div class="comment-content">
                    <form action="" id="comment_form">
                        <input type="hidden" name="uId" value="{{ formateId(user._id) }}">
                        <input type="hidden" name="tId" value="{{ formateId(topic[0]._id) }}">
                        <textarea name="content" id=""class="comment-text" placeholder="想对作者说点什么"></textarea>
                        <div class="comment-btn">
                            <button type="submit" class="btn btn-primary">回复</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {{ /if }}
    </div>
    <div class="col-md-3">
        <div class="bg3Color">
            <div class="user_header">
                <ul class="breadcrumb">
                    <li>作者</li>
                </ul>
            </div>
            <div class="user-info">
                <a href="/settings/{{topic[0].users[0].nickname}}" class="user-avatar">
                    <img src="{{ topic[0].users[0].avatar }}" alt="">
                </a>
                <a href="/settings/{{topic[0].users[0].nickname}}" class="user-nickname">{{ topic[0].users[0].nickname }}</a>
                <div class="score">
                    <span>积分：{{ topic[0].users[0].score }}</span>
                </div>
                <div class="bio">
                    <span>" {{ topic[0].users[0].bio }} "</span>
                </div>
                {{ if user && user.nickname != topic[0].users[0].nickname }}
                <div class="addFollow">
                    <span class="followHidden" id="myaId">{{ formateId(user._id) }}</span>
                    <span class="followHidden" id="myuId">{{ formateId(topic[0].users[0]._id) }}</span>
                    <span class="followHidden" id="my_id">{{ formateId(followId) }}</span>
                    {{ if isFollow == true }}
                    <span id="already"><a href="javascript:void(0);" id="removeFollow"><i class="glyphicon glyphicon-ok"></i> 已关注</a></span>
                    {{ else }}
                    <span id="addme"><a href="" id="addFollowme"><i class="glyphicon glyphicon-plus"></i> 关注</a></span>
                    {{ /if }}
                </div>
                {{ /if }}
            </div>
        </div>
    </div>
</section>
{{ /block }}
{{ block 'script' }}
<script type="text/javascript">
    $(function() {
	    var testView = editormd.markdownToHTML("topic-content", {
        });
        $('#comment_form').on('submit', function (e) {
            e.preventDefault()
            var formData = $(this).serialize()
            $.ajax({
            url: '/comment/new',
            type: 'post',
            data: formData,
            dataType: 'json',
            success: function (data) {
                var err_code = data.err_code
                if (err_code === 0) {
                    window.location.reload()
                }
            }
        })
        })
        // 添加关注
        $('#addFollowme').on('click', function () {
            var data = {
                uId: $('#myuId').text(),
                aId: $('#myaId').text()
            }
            $.ajax({
                url: '/follow/new',
                type: 'post',
                data: data,
                success: function (data) {
                    var err_code = data.err_code
                    if (err_code === 0) {
                        window.location.reload()
                    }
                }
            })
        })
        // 取消关注
        $('#removeFollow').on('click', function () {
            $.ajax({
                url: '/follow/delete/' + $('#my_id').text(),
                type: 'get',
                success: function (data) {
                    var err_code = data.err_code
                    if (err_code === 0) {
                        window.location.reload()
                    }
                }
            })
        })
        // 添加收藏
        $('#addCollect').on('click', function () {
            var data = {
                uId: $('#myuserId').text(),
                tId: $('#mytopicId').text()
            }
            $.ajax({
                url: '/collection/new',
                type: 'post',
                data: data,
                success: function (data) {
                    var err_code = data.err_code
                    if (err_code === 0) {
                        window.location.reload()
                    }
                }
            })
        })
        // 取消收藏
        $('#removeCollect').on('click', function () {
            $.ajax({
                url: '/collection/delete/' + $('#myCollecteId').text(),
                type: 'get',
                success: function (data) {
                    var err_code = data.err_code
                    if (err_code === 0) {
                        window.location.reload()
                    }
                }
            })
        })
        $('.comment-list-item').each(function (i, e) {
            $('#thisNum' + i).text($('#thumb' + i).text()) 
            // 回复点赞
            $('#myLike' + i).on('click', function () {
                $.ajax({
                    url: '/comment/thumb/' + $('#myCommentId' + i).text(),
                    type: 'post',
                    data: {
                        thumbOne: $('#myuserId').text()
                    },
                    success: function (data) {
                        var err_code = data.err_code
                        if (err_code === 0) {
                            window.location.reload()
                        }
                    }
                })
            })
            // 取消点赞
            $('#notLike' + i).on('click', function () {
                $.ajax({
                    url: '/comment/deleteThumb/' + $('#myCommentId' + i).text(),
                    type: 'get',
                    success: function (data) {
                        var err_code = data.err_code
                        if (err_code === 0) {
                            window.location.reload()
                        }
                    }
                })
            })
        })
    });
</script>  
{{ /block }}
